<template>
  <div style="height: 100%">
    <div style="position: relative; height: 100%">
      <div
        style="width: 100%; height: 100%; display: flex; flex-direction: column"
        id="zjjtjbshow1"
      >
        <div
          style="
            width: 7%;
            display: flex;
            align-items: center;
            margin-top: 1%;
            cursor: pointer;
          "
          @click="isconcel1()"
        >
          <div
            style="
              width: 0.8rem;
              height: 0.8rem;
              border: 0.05rem solid #182c56;
              display: flex;
              align-items: center;
              justify-content: space-around;
              border-radius: 50%;
            "
          >
            <div
              style="
                      width: 0.5rem;
                      height: 0.5rem;
                      border-radius: 50%;s
                    "
              :style="{ background: isbgjb ? 'transparent' : '#182c56' }"
              id="bgisjb"
            ></div>
          </div>
          <p style="font-size: 0.75rem; color: #182c56; margin-left: 8px">
            显示数据
          </p>
        </div>
        <div class="ecrratetop">
          <div class="ecrratetopdiv1">
            <div class="ecrratetopunder">
              <div class="ecrratemainright">
                <div
                  class="flexcolumn"
                  style="width: 9.9%"
                  v-for="item in record"
                  :key="item.id"
                >
                  <p class="fontstyle" id="znjbwzsb">
                    {{ item.percentage }}
                  </p>
                  <img
                    src="@/assets/henglantiao.png"
                    class="maintopimg"
                    style="width: 95%"
                  />
                  <p style="font-size: 1rem; color: #192c56">
                    {{ item.name }} &nbsp;&nbsp;
                    <!-- <span style="color: transparent">lei</span> -->
                  </p>
                </div>
              </div>
              <div
                class="ecrrateleftover"
                style=""
                @mouseover="prompt = true"
                @mouseout="prompt = false"
              >
                <div class="styleshijian" v-if="prompt">
                  累计降本率 = （有效最高报价 - 中标金额）/ 有效最高报价
                </div>
                <p>累计降本率</p>
                <div
                  style="height: 0.05rem; width: 100%; background-color: white"
                ></div>
                <p
                  class="jiangbanfontstyle"
                  id="ljjbl"
                  style="font-size: 2.3rem"
                  @mouseover="prompt = true"
                  @mouseout="prompt = false"
                >
                  {{ zonggongsijiangbenlv }}
                </p>
              </div>
              <div class="ecrratetopcheck public">
                <div style="display: flex; margin-right: 2rem">
                  <div
                    class="myselectimgznjb"
                    :style="{ 'margin-top': showfebl ? '-0.1rem' : '' }"
                  >
                    <Select
                      v-model="companyorgcode"
                      placeholder="请选择"
                      @visible-change="mouseClick"
                    >
                      <i slot="prefix" class="el-input__icon" />
                      <el-option
                        v-for="item in company"
                        :key="item.orgcode"
                        :label="item.title"
                        :value="item.orgcode"
                      >
                      </el-option>
                    </Select>
                  </div>
                </div>
                <div style="display: flex">
                  <!-- <div class="jiantoudatepiackerznjb"> -->
                  <!-- <div class="jiantoudatepiackerznjb">
                    <YYDatePick
                      range
                      :highlight-range="true"
                      type="month"
                      :to-body="false"
                      v-model="topdatepicker"
                      arrow
                      clearable
                    ></YYDatePick>
                  </div> -->
                  <div class="custom">
                    <dataPicker
                      :picker-options="pickerOptions0"
                      v-model="topdatepicker[0]"
                      type="month"
                      :editable="false"
                      value-format="yyyy-MM"
                      placeholder="开始日期"
                    />
                    -
                    <dataPicker
                      :picker-options="pickerOptions1"
                      v-model="topdatepicker[1]"
                      type="month"
                      :editable="false"
                      value-format="yyyy-MM"
                      placeholder="结束日期"
                    />
                    <img src="../assets/yellowdownsanjiao.png" alt="" />
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div style="flex: 1">
          <div style="display: flex; align-items: center; height: 1.3rem">
            <div class="jiaoyibottomdiv">
              <div class="custom2">
                <div class="time">
                  <dataPicker
                    v-model="gdwjbldatepicker[0]"
                    type="month"
                    :editable="false"
                    :picker-options="pickerOptions2"
                    @focus="handleOperation(true)"
                    @blur="handleOperation(false)"
                    value-format="yyyy-MM"
                    placeholder="开始日期"
                  />
                  -
                  <dataPicker
                    v-model="gdwjbldatepicker[1]"
                    type="month"
                    :editable="false"
                    :picker-options="pickerOptions3"
                    @focus="handleOperation(true)"
                    @blur="handleOperation(false)"
                    value-format="yyyy-MM"
                    placeholder="结束日期"
                  />
                  <div
                    class="icon"
                    :class="rotate ? 'transform180' : 'transform0'"
                  ></div>
                </div>
                <div
                  style="
                    height: 0.1rem;
                    border-bottom: 1px solid white;
                    width: 88%;
                    margin: 0 auto;
                  "
                ></div>
              </div>

              <!-- <dataPicker
                  v-model="gdwjbldatepicker"
                  type="monthrange"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  value-format="yyyy-MM"
                  :editable="false"
                  clearable
                  prefix-icon="el-icon-caret-bottom"
                  rotateable
                /> -->

              <div class="jbfenxi" style="margin-left: 2%">
                <p @click="fenxijb">分析</p>
                <img
                  @click="fenxijb"
                  src="@/assets/whiteright.png"
                  style="
                    margin-right: 0.25rem;
                    margin-left: 0.25rem;
                    height: 1rem;
                  "
                />
              </div>
            </div>
            <div style="flex: 1; display: flex">
              <img
                src="@/assets/henglantiao.png"
                style="height: 0.05rem; width: 100%"
              />
            </div>
          </div>
          <div id="tableheight">
            <div class="ecrratebottomleft" style="width: 100%; height: 100%">
              <p style="padding-left: 2%; height: 2%">各单位降本率</p>
              <div
                id="ecrratedanweijiangben"
                ref="ecrratedanweijiangben"
                style="height: 96%; width: 100%"
              ></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import APIS from "@/api/index";
import * as echarts from "echarts";
import { Message } from "element-ui";
import { monthDate } from "@/utils/common";
import YYDatePick from "@/components/YYDatePicker";
import dataPicker from "@/components/datePicker/index.js";
import Select from "@/components/select/index.js";
export default {
  props: {},
  components: { YYDatePick, dataPicker, Select },
  data() {
    return {
      pickerOptions0: {
        disabledDate: (time) => {
          if (this.topdatepicker[1]) {
            return time.getTime() > new Date(this.topdatepicker[1]).getTime();
          }
        },
      },
      pickerOptions1: {
        disabledDate: (time) => {
          return time.getTime() < new Date(this.topdatepicker[0]).getTime();
        },
      },
      pickerOptions2: {
        disabledDate: (time) => {
          if (this.gdwjbldatepicker[1]) {
            return (
              time.getTime() > new Date(this.gdwjbldatepicker[1]).getTime()
            );
          }
        },
      },
      pickerOptions3: {
        disabledDate: (time) => {
          return time.getTime() < new Date(this.gdwjbldatepicker[0]).getTime();
        },
      },
      companyorgcode: "9",
      companyorgname: "",
      zonggongsijiangbenlv: "",
      topdatepicker: ["2023-04", monthDate()],
      gdwjbldatepicker: ["2023-04", monthDate()],
      znjbsondatepicker: ["2023-04", monthDate()],
      prompt: false,
      isbgjb: false,
      company: [],
      form: { company: "", time: [] },
      chartTime: [],
      record: [],
      recordT: [],
      clickshow: false,
      showvisible: false,
      showfebl: false,
      timer: null,
      rotate: false,
    };
  },
  watch: {
    companyorgcode(newval, oldval) {
      if (newval == null) {
        return;
      }
      let obj = this.company.filter((item) => item.orgcode == newval);
      this.companyorgname = obj[0].orgname;
      if (newval == "9") {
        this.getgetEconomyRate("", this.$store.state.orgName);
      } else {
        this.getgetEconomyRate(obj[0].orgcode, obj[0].orgname);
      }
    },
    topdatepicker(newval, oldval) {
      if (newval == null) {
        return;
      }
      if (this.companyorgcode == "9") {
        this.getgetEconomyRate("", this.$store.state.orgName);
      } else {
        this.getgetEconomyRate(this.companyorgcode, this.companyorgname);
      }
    },
    gdwjbldatepicker(newval, oldval) {
      if (this.$store.state.orgType == 0) {
        this.getgdwjbldata(2);
      } else {
        this.getsongdwjbldata(2);
      }
    },
    znjbsondatepicker(newval, oldval) {
      if (newval == null) {
        return;
      }
      this.getSonCompanyEconomyRate("", this.$store.state.orgName);
    },
  },
  mounted() {
    if (window.devicePixelRatio > 1.5) {
      this.showfebl = true;
    }
    this.company = this.$store.state.unitlistarryqx.filter(
      (item) => item.title != "浙建集团总部" && item.title != "浙建商贸"
    );
    if (this.$store.state.orgType == 0 || this.$store.state.orgType == 1) {
      this.getgetEconomyRate("", this.$store.state.orgName);
      if (this.$store.state.orgType == 0) {
        this.getgdwjbldata(1);
      } else {
        this.getsongdwjbldata(1);
      }
    } else {
      this.getSonCompanyEconomyRate("", this.$store.state.orgName);
    }
  },
  methods: {
    handleOperation(e) {
      if (this.timer) {
        clearTimeout(this.timer);
      }
      this.timer = setTimeout(() => {
        this.rotate = e;
      }, 150);
    },
    mouseClick(e) {
      if (e) {
        var clickEvent = document.createEvent("MouseEvents");
        clickEvent.initEvent("click", false, false);
        document.dispatchEvent(clickEvent);
      }
    },
    datepickerchange(e, o) {
      this.showvisible = false;
    },
    clickchange(e) {
      var parentElement = document.querySelector(".jiantoudatepiackerznjb2");
      if (this.clickshow) {
        //展示
        document.documentElement.style.setProperty("--contenttype", "0deg");
      } else {
        //隐藏
        document.documentElement.style.setProperty("--contenttype", "180deg");
      }
      this.clickshow = !this.clickshow;
    },
    fenxijb() {
      window.open(
        this.base_url+"/report/sourcing/simple/v?_m=org_sourcing_purchasesavingrate_report&_t=141768&_winid=w2698",
        "_blank"
      );
    },
    getgdwjbldata(num) {
      let xValue = [];
      let yValue = [];
      let data = {};
      if (this.gdwjbldatepicker == null) {
        data = {
          orgName: this.$store.state.orgName,
        };
      } else {
        data = {
          orgName: this.$store.state.orgName,
          startDate: this.gdwjbldatepicker[0],
          endDate: this.gdwjbldatepicker[1],
        };
      }

      APIS.Znjb.getCompanyEconomyRate(data)
        .then((res) => {
          res.data.map((item) => {
            let ecomyarr = item.economy.split("%");
            let noone = ecomyarr[0] - 0;
            if (noone > 0) {
              if (item.shortname) {
                xValue.push(item.shortname);
              } else {
                xValue.push(item.orgname);
              }
              yValue.push(noone);
            }
          });

          if (num == 2) {
            let myChart = echarts.init(
              document.getElementById("ecrratedanweijiangben")
            );
            myChart.setOption({
              xAxis: [
                {
                  data: xValue,
                },
              ],
              series: [
                {
                  data: yValue,
                },
              ],
            });
            window.addEventListener("resize", function () {
              myChart.resize();
            });
          } else {
            this.columnarChartRenderznjb(xValue, yValue);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    getsongdwjbldata(num) {
      let xValue = [];
      let yValue = [];
      let data = {};
      if (this.gdwjbldatepicker == null) {
        data = {
          // orgCode: this.$store.state.orgCode,
          orgName: this.$store.state.orgName,
        };
      } else {
        data = {
          // orgCode: this.$store.state.orgCode,
          orgName: this.$store.state.orgName,
          startDate: this.gdwjbldatepicker[0],
          endDate: this.gdwjbldatepicker[1],
        };
      }

      APIS.Znjb.getSonCompanyEconomyRate(data)
        .then((res) => {
          res.data.map((item) => {
            let ecomyarr = item.economy.split("%");
            let noone = ecomyarr[0] - 0;
            if (noone > 0) {
              if (item.shortname) {
                xValue.push(item.shortname);
              } else {
                xValue.push(item.orgname);
              }
              yValue.push(noone);
            }
          });

          if (num == 2) {
            let myChart = echarts.init(
              document.getElementById("ecrratedanweijiangben")
            );
            myChart.setOption({
              xAxis: [
                {
                  data: xValue,
                },
              ],
              series: [
                {
                  data: yValue,
                },
              ],
            });
          } else {
            this.columnarChartRenderznjb(xValue, yValue);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    getgetEconomyRate(orgCode, orgName) {
      let arr = [];
      let data = {};

      // if (this.$store.state.orgType == 0) {
      if (this.topdatepicker == null) {
        data = {
          orgCode: orgCode,
          orgName: orgName,
        };
      } else {
        data = {
          orgCode: orgCode,
          orgName: orgName,
          startDate: this.topdatepicker[0],
          endDate: this.topdatepicker[1],
        };
      }
      // }
      // else {
      //   if (this.topdatepicker == null) {
      //     data = {
      //       orgCode: orgCode,
      //       orgName: orgName,
      //     };
      //   } else {
      //     data = {
      //       orgCode: orgCode,
      //       orgName: orgName,
      //       startDate: this.znjbsondatepicker[0],
      //       endDate: this.znjbsondatepicker[1],
      //     };
      //   }
      // }

      APIS.Znjb.getEconomyRate(data)
        .then((res) => {
          if (JSON.stringify(res.data) != "{}") {
            this.zonggongsijiangbenlv = res.data["economy"];
            for (let i = 0; i < this.$store.state.projectlistarr.length; i++) {
              for (const key in res.data) {
                if (this.$store.state.projectlistarr[i].title === key) {
                  if (key != "economy") {
                    let ecomyarr = res.data[key].split("%");
                    let noone = ecomyarr[0] - 0;
                    if (noone > 0) {
                      arr.push({ percentage: res.data[key], name: key });
                    } else {
                      arr.push({ percentage: "0.00%", name: key });
                    }
                  }
                }
              }
            }
          } else {
            this.zonggongsijiangbenlv = "0.00%";
            arr = [
              { percentage: "0.00%", name: "项目类物资设备" },
              { percentage: "0.00%", name: "项目类机械租赁" },
              { percentage: "0.00%", name: "项目类劳务分包" },
              { percentage: "0.00%", name: "项目类专业分包" },
              { percentage: "0.00%", name: "项目类服务采购" },
              { percentage: "0.00%", name: "非项目物资采购" },
              { percentage: "0.00%", name: "非项目服务采购" },
              { percentage: "0.00%", name: "非生产经营类" },
            ];
          }
          this.record = [...arr];
        })
        .catch((err) => {
          console.log(err);
        });
    },
    getSonCompanyEconomyRate(orgCode, orgName) {
      let arr = [];
      APIS.Znjb.getEconomyRate({
        // orgCode: orgCode,
        orgName: orgName,
        startDate: this.topdatepicker[0],
        endDate: this.topdatepicker[1],
      })
        .then((res) => {
          if (res.data != null) {
            this.zonggongsijiangbenlv = res.data["economy"];
            for (let i = 0; i < this.$store.state.projectlistarr.length; i++) {
              for (const key in res.data) {
                if (this.$store.state.projectlistarr[i].title === key) {
                  if (key != "economy") {
                    let ecomyarr = res.data[key].split("%");
                    let noone = ecomyarr[0] - 0;
                    if (noone > 0) {
                      arr.push({ percentage: res.data[key], name: key });
                    } else {
                      arr.push({ percentage: "0.00%", name: key });
                    }
                  }
                }
              }
            }
          } else {
            arr = [
              { percentage: "0.00%", name: "项目类物资设备" },
              { percentage: "0.00%", name: "项目类机械租赁" },
              { percentage: "0.00%", name: "项目类劳务分包" },
              { percentage: "0.00%", name: "项目类专业分包" },
              { percentage: "0.00%", name: "项目类服务采购" },
              { percentage: "0.00%", name: "非项目物资采购" },
              { percentage: "0.00%", name: "非项目服务采购" },
              { percentage: "0.00%", name: "非生产经营类" },
            ];
          }
          this.recordT = [...arr];
        })
        .catch((err) => {
          console.log(err);
        });
    },
    isconcel1() {
      this.isbgjb = !this.isbgjb;
      const myChart = echarts.init(this.$refs["ecrratedanweijiangben"]);
      if (this.isbgjb) {
        myChart.setOption({
          series: [
            {
              itemStyle: {
                normal: {
                  label: {
                    show: false,
                    position: "top",
                    textStyle: {
                      color: "black",
                      fontSize: 12,
                    },
                  },
                },
              },
            },
          ],
        });
      } else {
        myChart.setOption({
          series: [
            {
              itemStyle: {
                normal: {
                  label: {
                    show: true,
                    position: "top",
                    textStyle: {
                      color: "black",
                      fontSize: 12,
                    },
                  },
                },
              },
            },
          ],
        });
      }
    },
    columnarChartRenderznjb(xValue, yValue) {
      let grid = {};
      let textstyle9 = {};
      let percentnum = 0;
      if (window.devicePixelRatio == 1.5) {
        grid = {
          left: "3%",
          right: "4%",
          bottom: "10",
          containLabel: true,
        };
        textstyle9 = {
          fontSize: 10,
          align: "center",
          color: "#333333",
        };
      } else if (window.devicePixelRatio == 1.25) {
        grid = {
          left: "3%",
          right: "4%",
          bottom: "10",
          containLabel: true,
        };
        textstyle9 = {
          fontSize: 10,
          align: "center",
          color: "#333333",
        };
      } else {
        grid = {
          left: "3%",
          right: "4%",
          bottom: "10",
          containLabel: true,
        };
        textstyle9 = {
          fontSize: 12,
          align: "center",
          color: "#333333",
        };
      }

      percentnum = xValue.length > 15 ? (15 / xValue.length) * 100 : 100;

      // if (xValue.length > 25) {
      //   percentnum = 30
      // } else {
      //   percentnum = 60
      // }

      var myChart = echarts.init(this.$refs["ecrratedanweijiangben"]);
      var option;
      option = {
        tooltip: {
          trigger: "axis",
          formatter(params) {
            for (let x in params) {
              return `${params[x].marker} ${params[x].name}:${params[x].data}%`;
            }
          },
        },
        grid: grid,
        dataZoom: [
          {
            type: "slider", //slider表示有滑动块的，
            show: true,
            xAxisIndex: [0], //表示x轴折叠
            start: 1, //数据窗口范围的起始百分比,表示1%
            end: percentnum, //数据窗口范围的结束百分比,表示35%坐标
            height: 10,
            bottom: 0,
            showDetail: false,
            // width: 55,
          },
        ],

        xAxis: [
          {
            type: "category",
            data: xValue,
            axisLabel: {
              show: true,
              interval: 0,
              // rotate: -30,
              // margin: 30,
              formatter: function (params) {
                var newParamsName = "";
                var paramsNameNumber = params.length;
                var provideNumber = 4; // 一行显示几个字 然后就超过字数就会自动换行
                var rowNumber = Math.ceil(paramsNameNumber / provideNumber);
                if (paramsNameNumber > provideNumber) {
                  for (var p = 0; p < rowNumber; p++) {
                    var tempStr = "";
                    var start = p * provideNumber;
                    var end = start + provideNumber;
                    if (p == rowNumber - 1) {
                      tempStr = params.substring(start, paramsNameNumber);
                    } else {
                      tempStr = params.substring(start, end) + "\n";
                    }
                    newParamsName += tempStr;
                  }
                } else {
                  newParamsName = params;
                }
                return newParamsName;
              },
              textStyle: textstyle9,
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            axisLabel: {
              show: false,
              interval: 0,
              rotate: "45",
            },
          },
        ],
        series: [
          {
            name: "单位采购情况",
            type: "bar",
            barWidth: "20%",
            label: {
              show: true,
              position: "top",
              textStyle: {
                color: "black",
                fontSize: 12,
              },
            },
            data: yValue,
          },
        ],
      };

      option && myChart.setOption(option);
      window.addEventListener("resize", function () {
        myChart.resize();
      });
    },
  },
};
</script>
<style src="@/assets/css/public.css" scoped></style>
<style lang="scss" scoped>
.zhinengjiangben {
  width: 98%;
  height: 95%;
  font-size: 1rem;
  margin: 0 auto;

  .maindiv {
    width: 100%;
    height: 100%;
  }
}
::v-deep .myselectimgznjb {
  width: 7rem;
  margin-left: 0.5rem;
  .el-input__inner {
    font-family: JCYT;
    border: 0.05rem solid #192c55;
    border-radius: 1.1rem;
    background-color: transparent;
    height: 1.3rem;
    padding-left: 0.5rem;
    padding-right: 2.5rem;
    position: relative;
    font-size: 0.8rem;
  }

  .el-input__prefix {
    width: 1.2rem;
    height: 1.2rem;
    content: "";
    background: url("@/assets/yellowdownsanjiao.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    position: absolute;
    top: 50%;
    margin-left: calc(100% - 0.9rem);
    transform: translate(-50%, -53%);
  }
  .el-input__suffix {
    width: 20px;
    height: 20px;
    color: #192c55;
    right: 1.3rem;
    top: calc(100% - 0.6rem);
  }
  .el-select .el-input .el-select__caret {
    color: #192c55;
  }
  .el-icon-arrow-up:before {
    content: "";
  }
}
::v-deep .custom {
  height: 1.2rem;
  width: 14rem;
  display: flex;
  align-content: center;
  border: 0.05rem solid #192c55;
  border-radius: 1.1rem;
  .el-input__prefix {
    display: none;
  }
  img {
    width: 1.2rem;
    height: 1.2rem;
  }
  .el-input__inner {
    height: 100%;
    font-size: 0.8rem;
    border: none;
    padding: 0 1.6rem;
    background-color: transparent;
  }
  .el-date-editor .el-range__close-icon,
  .el-range-separator {
    display: flex;
    align-items: center;
    justify-content: space-around;
  }
  .el-range-editor .el-range-input {
    background-color: transparent;
  }
  .el-date-editor .el-range__close-icon {
    margin-right: 0.5rem;
  }
}
::v-deep .custom2 {
  height: 1.2rem;
  width: 13rem;
  .time {
    .transform180 {
      transform: rotate(180deg);
      transition: all 0.5s;
    }
    .transform0 {
      transform: rotate(0deg);
      transition: all 0.5s;
    }
    .icon {
      display: flex;
      align-items: center;
    }
    .icon::before {
      content: "▼";
      font-size: 12px;
      color: #fff;
    }
    display: flex;
    align-content: center;
    .el-input__prefix {
      display: none;
    }
    img {
      width: 1.2rem;
      height: 1.2rem;
    }
    .el-input__inner {
      height: 100%;
      padding: 0 1.6rem;
      font-size: 0.7rem;
      border: none;
    }
    .el-date-editor .el-range__close-icon,
    .el-range-separator {
      display: flex;
      align-items: center;
      justify-content: space-around;
    }
    .el-input__inner {
      background-color: transparent;
      color: #fff;
    }
    .el-range-editor .el-range-input {
      background-color: transparent;
    }
    .el-date-editor .el-range__close-icon {
      margin-right: 0.5rem;
    }
  }
}
::v-deep .style3 {
  height: 1.4rem;
  width: 12rem;
  margin-left: 0.3rem;
  .el-date-editor--monthrange.el-input,
  .el-date-editor--monthrange.el-input__inner {
    width: 100%;
    height: 100%;
    border-radius: 1.1rem;
    border: 0.05rem solid #192c55;
    position: relative;
    background-color: transparent;
  }
  .el-date-editor .el-range__icon {
    position: absolute;
    right: 0;
    background: url(../assets/yellowdownsanjiao.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    width: 1.2rem;
    height: 1.2rem;
    content: "";
    right: 0%;
    top: 0%;
    // margin-left: calc(100% - 1rem);
    // transform: translate(-50%, -50%);
  }
  .el-date-editor .el-range__close-icon,
  .el-range-separator {
    display: flex;
    align-items: center;
    justify-content: space-around;
  }
  .el-input__inner {
    background-color: transparent;
  }
  .el-range-editor .el-range-input {
    background-color: transparent;
  }
  .el-date-editor .el-range__close-icon {
    margin-right: 0.5rem;
  }
}
::v-deep .style4 {
  .el-range-editor {
    width: 11.5rem;
    margin-left: 0.5rem;
  }
  .el-icon-caret-bottom:before {
    content: "▼";
    font-size: 14px;
    color: white;
  }
  .el-range__icon {
    width: 1.2rem;
    height: 1.2rem;
    position: absolute;
    // top: 50%;
    margin-left: calc(100% - 1.6rem);
    // transform: translate(-50%, -50%);
  }
  .el-input__inner {
    font-family: JCYT;
    border: none;
    // border-bottom: 0.05rem solid #0000ff;
    background-color: transparent;
    height: 1.3rem;
    padding-left: 0.5rem;
    position: relative;
    font-size: 0.8rem;
  }
  .el-range-input {
    background: transparent;
    color: white;
  }
  .el-input__icon {
    line-height: 0.3rem;
    width: 1rem;
    height: 1rem;
  }
  .el-range-separator {
    display: flex;
    align-items: center;
    justify-content: space-around;
    color: white;
  }
  .el-range__close-icon {
    line-height: 0.3rem;
  }
}
</style>
